<template>
  <div class="view_page weizhi">
    <el-card
      class="box-card"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="back-page">
            <div class="add-back" @click="back">
              <i class="fa fa-arrow-left" aria-hidden="true"></i>
              <span v-if="this.addtype == 'add'">新增MapModelData（倾斜摄影模型配置数据）</span>
              <span v-else>修改MapModelData（倾斜摄影模型配置数据）</span>
            </div>
          </div>
        </div>
        <div class="right">
          <el-button type="primary" @click="save('add')" v-if="addtype == 'add'">保存</el-button>
          <el-button type="primary" @click="save('update')" v-if="addtype == 'update'">保存</el-button>
        </div>
        <!-- 显示：{{ is_eq_TF }}--站点类型是几:{{ is_num }} -->
      </div>
      <!--卡片内容-->
      <div class="card-centont">
        <el-form :model="liveData" label-width="170px">
          <el-form-item label="title" :required="true">
            <el-input v-model="liveData.title" clearable></el-input>
          </el-form-item>
          <el-form-item label="选择模型" :required="true">
            <el-select v-model="liveData.modelId" @change="changeModel">
              <el-option v-for="item in modelList" :key="item.modelId" :label="item.modelName"
                         :value="item.modelId"></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="modelId" v-if="liveData.modelId">
                      <el-input v-model="liveData.modelId" disabled></el-input>
                    </el-form-item>-->
          <el-form-item label="modelPath" v-if="liveData.modelId">
            <el-input v-model="liveData.modelPath" disabled></el-input>
          </el-form-item>
          <el-form-item label="position" v-if="liveData.modelId">
            <el-input v-model="liveData.position" disabled></el-input>
          </el-form-item>
          <el-form-item label="rotation" v-if="liveData.modelId">
            <el-input v-model="liveData.rotation" disabled></el-input>
          </el-form-item>
          <el-form-item label="scale" v-if="liveData.modelId">
            <el-input v-model="liveData.scale" disabled></el-input>
          </el-form-item>
          <el-form-item label="highlight_name" v-if="liveData.modelId">
            <el-input v-model="liveData.highlight_name" disabled></el-input>
          </el-form-item>

          <!--          <el-form-item label="id">
                     <el-input v-model="liveData.id" disabled></el-input>
                   </el-form-item>-->

          <el-form-item label="modelScanningPosition" v-if="liveData.modelId">
            <el-input v-model="liveData.modelScanningPosition" disabled></el-input>
          </el-form-item>
          <el-form-item label="modelScanningRotation" v-if="liveData.modelId">
            <el-input v-model="liveData.modelScanningRotation" disabled></el-input>
          </el-form-item>
          <el-form-item label="modelScanningScale" v-if="liveData.modelId">
            <el-input v-model="liveData.modelScanningScale" disabled></el-input>
          </el-form-item>
		  <el-form-item label="centerPos"  v-if="liveData.modelId">
		    <el-input v-model="liveData.centerPos" clearable disabled></el-input>
		  </el-form-item>
          <el-form-item label="选择地区" >
            <el-cascader
              class="cascader"
              v-model="selelected2"
              :options="area"
              :props="props2"
              clearable
              ref="areaRef"
              @change="changeArea"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="选择工程" >
            <el-cascader
              class="cascader"
              v-model="selelected"
              :options="options"
              :props="props"
              clearable
              :popper-class="'hide'"
              @change="changeCity"
              ref="cascade"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="bubble_pos" >
            <el-input v-model="liveData.bubble_pos" clearable></el-input>
          </el-form-item>
          <el-form-item label="bubble_focusingPos" >
            <el-input v-model="liveData.bubble_focusingPos" clearable></el-input>
          </el-form-item>
          <el-form-item label="bubble_focusing" >
            <el-input v-model="liveData.bubble_focusing" clearable></el-input>
          </el-form-item>
          <el-form-item label="bubble_focusingDistance" >
            <el-input v-model="liveData.bubble_focusingDistance" clearable></el-input>
          </el-form-item>
          <el-form-item label="bubble_thumbnailPath">
            <el-input v-model="liveData.bubble_thumbnailPath" clearable></el-input>
          </el-form-item>
          <el-form-item label="bubble_type" >
            <el-input v-model="liveData.bubble_type" clearable></el-input>
          </el-form-item>
          

        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import {Message} from "element-ui";
import ckeditor from "@/components/common/ckeditor/ckeditor";

export default {
  name: "liveAdd",
  components: {
    ckeditor
  },
  data() {
    return {
      loading: false,
      modelList: [],
      liveData: {
        id: 1,
        title: "",
        modelId: "",
        modelName: "",
        modelPath: "",
        position: "",
        rotation: "",
        scale: "",
        highlight_name: "",
        modelScanningPosition: "",
        modelScanningRotation: "",
        modelScanningScale: "",
        bubble_pos: "",
        bubble_focusingPos: "",
        bubble_focusing: "",
        bubble_focusingDistance: "",
        bubble_thumbnailPath: "",
        bubble_type: "Model",
        centerPos: ""
      },
      addtype: "",
      //选择地区
      selelected2: [],
      area: [],
      props2: {
        multiple: true,
        expandTrigger: "click"
      },
      //选择工程
      selelected: [],
      options: [],
      props: {
        expandTrigger: "click",
        multiple: true,
        checkStrictly: false,
        value: "value",
        label: "label"
      }
    };
  },
  created() {
    var _this = this;
    _this.addtype = _this.$route.query.type;
    _this.modelList = _this.$route.query.modelList;
    // console.log(_this.modelList)
    this.village_list();
    _this.getoptionsData(); //选择工程级联列表
    _this.getareaData(); //选择地区级联列表


    if (this.addtype == "update") {
      var alldata = JSON.parse(JSON.stringify(this.$route.query.data));
      this.liveData = alldata;
      // 地区级联列表回显
      let twoDArray2 = [];
      twoDArray2 = _this.liveData.json_rivers.map((item, index) => {
        return ([index] = [item.river_type, item.river_id]);
      });
      _this.selelected2 = twoDArray2;

      // 工程级联列表回显
      let twoDArray = [];
      twoDArray = _this.liveData.json_pro.map((item, index) => {
        return ([index] = [item.pro_type, item.pro_id]);
      });
      _this.selelected = twoDArray;

    }
  },

  methods: {

    initData() {
      this.liveData = {
        id: -1,
        title: '',
        modelId: "",
        modelName: "",
        modelPath: "",
        position: "",
        rotation: "",
        scale: "",
        highlight_name: "",
        modelScanningPosition: "",
        modelScanningRotation: "",
        modelScanningScale: "",
        bubble_pos: "",
        bubble_focusingPos: "",
        bubble_focusing: "",
        bubble_focusingDistance: "",
        bubble_thumbnailPath: "",
        bubble_type: "Model",
        centerPos: ""
      }
    },
    changeModel() {
      this.modelList.map(item => {
        if (item.modelId == this.liveData.modelId) {
          this.liveData.modelId = item.modelId;
          this.liveData.modelName = item.modelName;
          this.liveData.modelPath = item.modelPath;
          this.liveData.position = item.position;
          this.liveData.rotation = item.rotation;
          this.liveData.scale = item.scale;
          this.liveData.highlight_name = item.highlight_name;
          this.liveData.modelScanningPosition = item.modelScanningPosition;
          this.liveData.modelScanningRotation = item.modelScanningRotation;
          this.liveData.modelScanningScale = item.modelScanningScale;
		  this.liveData.centerPos = item.centerPos;
        }
      })
    },
    village_list() {
      this.$apis.unitywebpc_engine_list().then(res => {
        if (res.result == 0) {
          let tt = res.data;
          this.options = tt;
        }
      });
    },
    // 选择地区级联列表
    getareaData() {
      var _this = this;
      _this.$apis.unitywebpc_address_list().then(res => {
        if (res.result == 0) {
          _this.area = res.data;
        }
      });
    },
    // 选择工程级联列表
    getoptionsData() {
      var _this = this;
      _this.$apis.unitywebpc_engine_list().then(res => {
        if (res.result == 0) {
          _this.options = res.data;
        }
      });
    },
    // 地区级联选择
    changeArea(items) {
      let itemArr2 = [];
      this.$refs["areaRef"].getCheckedNodes(items).map(item => {
        itemArr2.push({
          river_type: item.pathNodes[0].value,
          river_id: item.pathNodes[1].value,
          name: item.pathLabels[0],
          river_name: item.pathLabels[1]
        });
      });
      this.liveData.json_rivers = itemArr2;
    },
    // 工程级联选择
    changeCity(items) {
      let itemArr = [];
      this.$refs["cascade"].getCheckedNodes(items).map(item => {
        itemArr.push({
          pro_type: item.pathNodes[0].value,
          pro_id: item.pathNodes[1].value,
          name: item.pathLabels[0],
          pro_name: item.pathLabels[1]
        });
      });
      this.liveData.json_pro = itemArr;
    },

    save(addtype) {
      var _this = this;
      var datas = _this.liveData;

      if (datas.modelId == "") {
        Message.error("请选择模型");
        return;
      }
      if (datas.title == "") {
        Message.error("请填写title");
        return;
      }
      // if (datas.modelScanningPosition == "") {
      //   Message.error("请填写modelScanningPosition");
      //   return;
      // }
      // if (datas.modelScanningRotation == "") {
      //   Message.error("请填写modelScanningRotation");
      //   return;
      // }
      // if (datas.modelScanningScale == "") {
      //   Message.error("请填写modelScanningScale");
      //   return;
      // }
      // if (datas.bubble_pos == "") {
      //   Message.error("请填写bubble_pos");
      //   return;
      // }
      // if (datas.bubble_focusingPos == "") {
      //   Message.error("请填写bubble_focusingPos");
      //   return;
      // }
      // if (datas.bubble_focusing == "") {
      //   Message.error("请填写bubble_focusing");
      //   return;
      // }
      // if (datas.bubble_focusingDistance == "") {
      //   Message.error("请填写bubble_focusingDistance");
      //   return;
      // }
      // // if (datas.bubble_thumbnailPath == "") {
      // //   Message.error("请填写bubble_thumbnailPath");
      // //   return;
      // // }
      // if (datas.bubble_type == "") {
      //   Message.error("请填写bubble_type");
      //   return;
      // }
      // if (datas.centerPos == "") {
      //   Message.error("请填写centerPos");
      //   return;
      // }

      // if (((this.selelected2 == "" || this.selelected2.length == 0))&&((this.selelected == "" || this.selelected.length == 0))){
      //   Message.error("请至少选择一个工程/地区");
      //   return;
      // }

      // if (this.selelected2 == "" || this.selelected2.length == 0) {
      //   Message.error("地区不能为空");
      //   return;
      // }
      datas.json_pro = JSON.stringify(datas.json_pro||[]);
      // if (this.selelected == "" || this.selelected.length == 0) {
      //   Message.error("工程不能为空");
      //   return;
      // }
      datas.json_rivers = JSON.stringify(datas.json_rivers||[]);
      // console.log(datas);

      if (addtype == "add") {
        _this.$apis.u_map_add(datas).then(res => {
          if (res.result == 0) {
            Message.success("添加成功");
            _this.$router.back();
          }
        });
      } else {
        datas.id = _this.$route.query.data.id;
        _this.$apis.u_map_update(datas).then(res => {
          if (res.result == 0) {
            Message.success("修改成功");
            _this.$router.back();
          }
        });
      }
    },


    back() {
      this.$router.back();
    }
  }
};
</script>

<style scoped>
.weizhi .el-dialog__body {
  height: 500px;
}

/*.hide {
	  .el-cascader-menu:first-of-type {
	    .el-cascader-node {
	      .el-checkbox {
	        display: none;
	      }
	    }
	  }
	}*/
</style>
<style lang="scss" scoped>
/deep/ .el-cascader__tags .el-tag .el-icon-close {
  display: none;
}
</style>
